<template>
  <div class="box">
    <div class="container">
      <div class="cloud">
        <!--       <div class="text">a</div>-->
        <!--       <div class="text">b</div>-->
        <!--       <div class="text">c</div>-->
        <!-- 雨滴将会在这里出现 -->
      </div>
    </div>
  </div>
</template>

<script setup>
 import { onMounted,onUnmounted } from "vue";
  // 生成字母和数字数组
  const generateText = () => {
    const letters = [];
    const numbers = [];
    const a = "a".charCodeAt(0);
    for (let i = 0; i < 26; i++) {
      letters.push(String.fromCharCode(a + i));
      if (i < 9) {
        numbers.push(i + 1);
      }
    }
    return [...letters, ...numbers];
  }
  // 从生成的数组中随机取出一个字符
  const randomText = () => {
    const texts = generateText();
    return texts[Math.floor(Math.random() * texts.length)];
  }
  // rgb颜色随机
   const rgb = () =>{
    const r = Math.floor(Math.random()*256);
    const g = Math.floor(Math.random()*256);
    const b = Math.floor(Math.random()*256);
     return 'rgb(' + r + ',' + g + ',' + b + ')';
  }
  const rainEffect = () => {
    const cloudEle = document.querySelector(".cloud");
    const textEle = document.createElement("div");
    const style = document.styleSheets[0]
    textEle.innerText = randomText();
    textEle.classList.add("text");
    const left = Math.floor(Math.random() * 310);
    const size = Math.random() * 1.5;
    const duration = Math.random();
    const styleSheets = {
      position: 'absolute',
      top: '100px',
      height: '20px',
      lineHeight: '20px',
      left: `${left}px`,
      color:rgb(),
      zIndex:10,
      fontSize: `${0.5 + size}em`,
      animationDuration: `${1 + duration}s`,
      animation: 'animate 2s linear forwards',
    };
    // 设置动画关键帧
    style.insertRule(`@keyframes animate {
      0% {
        transform: translateX(0);
      }
      70% {
        transform: translateY(230px);
      }
      100% {
        transform: translateY(230px);
      }
    }`,0);
    Object.assign(textEle.style, styleSheets);
    cloudEle.appendChild(textEle);
    setTimeout(() => {
      cloudEle.removeChild(textEle);
    }, 2000);
  }
let timer = null
 onMounted(()=>{
   // 每隔20ms创建一个雨滴元素
   timer = setInterval(() => rainEffect(), 20);
 })
 onUnmounted(() => {
   clearInterval(timer)
   timer = null
 })
</script>

<style scoped>

  .box {
    --body-color: #181c1f;
    --primary-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    background-color: var(--body-color);
  }

  .container {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    /* 添加一个从下往上线性渐变的镜像效果，增加视觉层次感 */
    -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, transparent, transparent, #0005);
  }

  .cloud {
    position: relative;
    top: 50px;
    z-index: 100;

    /* 横向云朵 */
    width: 320px;
    height: 100px;
    background-color: var(--primary-color);
    border-radius: 100px;

    /* drop-shadow函数将阴影效果应用于投影图像 */
    filter: drop-shadow(0 0 30px var(--primary-color));

    text-transform: uppercase;
    /* 为文字添加阴影，看上去发光，增加视觉效果 */
    text-shadow: 0 0 5px var(--primary-color), 0 0 15px var(--primary-color), 0 0 30px var(--primary-color);
    transform-origin: bottom;
  }
  .cloud::before {
    content: "";
    /* 左侧小云朵 */
    width: 110px;
    height: 110px;
    background-color: var(--primary-color);
    border-radius: 50%;
    position: absolute;
    top: -50px;
    left: 40px;

    /* 右侧大云朵 */
    box-shadow: 90px 0 0 30px var(--primary-color);
  }
</style>